<template>
  <template
    v-if="
      menu.children &&
      menu.children.length &&
      !menu.meta.hideMenu &&
      !menu.meta.isLeaf
    "
  >
    <el-sub-menu :index="menu.path">
      <!-- <img :src="menu.meta.icon" alt="" /> -->
      <template #title>
        <img class="menu_icon" :src="menu.meta.icon" alt="" />
        <span>{{ menu.meta.title }}</span>
      </template>
      <menu-item
        v-for="item in menu.children"
        :key="item.path"
        :menu="item"
        :parentPath="`${parentPath}/${menu.path}`"
      />
    </el-sub-menu>
  </template>

  <el-menu-item
    v-if="menu.children && !menu.meta.hideMenu && menu.meta.isLeaf"
    :index="`${parentPath}/${menu.path}`"
  >
    <img class="menu_icon" :src="menu.meta.icon" alt="" />
    <template #title>
      <span>{{ menu.meta.title }}</span>
    </template>
  </el-menu-item>

  <!-- <el-menu-item
    v-if="menu.children && menu.children.length != 0 && !menu.meta.hideMenu&&menu.meta.isLeaf"
    :index="`${parentPath}/${menu.path}`"
  >
    {{ menu.meta.title }}
  </el-menu-item> -->
</template>

<script>
export default {
  name: 'menu-item',
  props: {
    menu: {
      type: Object,
      required: true,
    },
    parentPath: {
      type: String,
      default: '',
    },
  },
  setup(props) {
    const parentPath = props.parentPath;
    const menu = props.menu;
    return {
      menu,
      parentPath,
    };
  },
};
</script>

<style lang="scss" scoped>
.menu_icon {
  padding: 0 5px;
}
</style>